<template>
  <div class="home">
    <!-- 头部 -->
    <div class="header">
      <h3 class="title">人事管理系统</h3>
      <!-- 注销 -->
      <el-dropdown>
        <span class="el-dropdown-link">
          当前用户：{{ username }}
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-button
            :plain="true"
            style="border: none; width: 70px; height: 35px"
            @click="exit()"
            >退出</el-button
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="content">
      <div class="content-left">
        <!-- 左边菜单 -->
        <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#5dd5c8"
        >
          <el-menu-item index="1" @click="tabchange(1)">
            <i class="el-icon-user"></i>
            <span slot="title">个人中心</span>
          </el-menu-item>
          <el-menu-item
            index="2"
            @click="tabchange(2)"
            v-if="this.type == '经理'"
          >
            <i class="el-icon-s-cooperation"></i>
            <span slot="title">考勤管理</span>
          </el-menu-item>
          <el-menu-item
            index="3"
            @click="tabchange(3)"
            v-if="this.type == '经理'"
          >
            <i class="el-icon-finished"></i>
            <span slot="title">申请管理</span>
          </el-menu-item>

          <el-menu-item
            index="4"
            @click="tabchange(6)"
            v-if="this.type == '员工'"
          >
            <i class="el-icon-s-cooperation"></i>
            <span slot="title">个人考勤</span>
          </el-menu-item>
          <el-menu-item
            index="5"
            @click="tabchange(7)"
            v-if="this.type == '员工'"
          >
            <i class="el-icon-finished"></i>
            <span slot="title">个人申请</span>
          </el-menu-item>
          <el-menu-item index="6" @click="tabchange(4)">
            <i class="el-icon-s-cooperation"></i>
            <span slot="title">添加考勤</span>
          </el-menu-item>
          <el-menu-item
            index="7"
            @click="tabchange(5)"
            v-if="this.type == '员工'"
          >
            <i class="el-icon-finished"></i>
            <span slot="title">添加申请</span>
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 个人中心 -->
      <div class="content-right" v-if="tabIndex == 1">
        <user-info></user-info>
      </div>
      <!-- 考勤列表 -->
      <div class="content-right" v-if="tabIndex == 2">
        <div class="searchBtn" style="display: flex">
          <el-input
            v-model="searchTxt1"
            size="big"
            placeholder="输入客户名称"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getcheckworkList()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="checkWorkList"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column label="用户姓名" prop="createByName"></el-table-column>
          <el-table-column label="工作内容" prop="content"></el-table-column>
          <el-table-column label="创建日期" prop="createTime"></el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="deleteCheckwork(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getcheckworkList"
          :current-page.sync="pageNo_checkWork"
          :page-size="pageSize_checkWork"
          :total="total_checkWork"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
      <!-- 申请列表 -->
      <div class="content-right" v-if="tabIndex == 3">
        <div class="searchBtn" style="display: flex">
          <el-input
            v-model="searchTxt2"
            size="big"
            placeholder="输入申请人名称"
          />
          <el-button
            size="small"
            icon="el-icon-search"
            style="height: 40px"
            @click="getApplyList2()"
          ></el-button>
        </div>
        <!-- 列表数据 -->
        <el-table
          :data="applyList"
          style="width: 100%"
          stripe
          v-loading="loading"
        >
          <el-table-column label="申请人" prop="createByName"></el-table-column>
          <el-table-column label="标题" prop="title"></el-table-column>
          <el-table-column label="内容" prop="content"></el-table-column>
          <el-table-column label="申请时间" prop="createTime"></el-table-column>
          <el-table-column prop="status" label="状态" width="70%" >
          <template slot-scope="scope" >
          <span slot="reference" v-if="scope.row.status == '0'">  
              <i class="dotClass" style="background-color: Azure "></i>
            </span>
            <span slot="reference" v-if="scope.row.status == '1'">
              <i class="dotClass" style="background-color: springgreen"></i>
            </span>
            <span slot="reference" v-if="scope.row.status == '2'" >
              <i class="dotClass" style="background-color: red"></i>
            </span>
          </template>
        </el-table-column>
         <el-table-column  align="right">
            <template slot-scope="scope" v-if="scope.row.status == '0'">
              <el-button type="primary" icon="el-icon-edit" @click="pass(scope.row)">同意</el-button>
              <el-button type="danger" icon="el-icon-delete" @click="noPass(scope.row)">不同意</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @current-change="getApplyList2"
          :current-page.sync="pageNo_apply"
          :page-size="pageSize_apply"
          :total="total_apply"
          layout="total, prev, pager, next"
        ></el-pagination>
      </div>
      <!-- 个人考勤列表 -->
      <div class="content-right" v-if="tabIndex == 6">
        <my-checkwork></my-checkwork>
      </div>
      <!-- 个人申请列表 -->
      <div class="content-right" v-if="tabIndex == 7">
        <my-apply></my-apply>
      </div>
      <!-- 添加考勤 -->
      <div class="content-right" v-if="tabIndex == 4">
        <add-checkwork></add-checkwork>
      </div>
      <!-- 添加申请 -->
      <div class="content-right" v-if="tabIndex == 5">
        <add-apply></add-apply>
      </div>
    </div>
  </div>
</template>

<script>
import userRequest from "../request/user";
import userInfo from "../components/userInfo";
import addCheckwork from "../components/addCheckwork";
import addApply from "../components/addApply";
import myCheckwork from "../components/myCheckwork";
import myApply from "../components/myApply";
import cookie from "js-cookie"; //引入cookie获取token验证
export default {
  data() {
    return {
      loading: false,
      userinfo: null, // 用户信息
      value: false, //是否同意状态
      value1: false, //是否禁用状态
      status: "1",
      username: "", //用户名
      type: "", //角色类型
      tabIndex: "1", //tab下标

      checkWorkList: [], //考勤列表
      pageNo_checkWork: 1,
      pageSize_checkWork: 10,
      total_checkWork: null,

      searchTxt1: null, // 考勤搜索条件
      searchTxt2: null, // 申请搜索条件

      applyList: [], //申请列表
      pageNo_apply: 1, // 分页页数
      pageSize_apply: 10, // 每页条数
      total_apply: null,
    };
  },
  // 子组件注册
  components: {
    userInfo, // 用户详情
    addCheckwork, // 添加考勤
    addApply, // 添加申请
    myCheckwork, // 我的考勤
    myApply, // 我的申请
  },

  methods: {
    // 菜单切换
    tabchange(index) {
      this.tabIndex = index; //主要是将tabIndex变活 只要点击就变化
      this.loading = true; //每次切换都要让加载开关打开
      this.getcheckworkList(); //切换时请求数据，为了实时更新
      this.getApplyList2(); //切换时请求数据，为了实时更新
    },

    // 退出登录
    exit() {
      window.localStorage.removeItem("userinfo"); //删除用户信息
      cookie.remove("satoken"); //删除token
      this.$router.push({ path: "/" }); //跳到登录
      this.$message.success("注销成功!");
    },

    // 审核通过
    pass(item) {
      item.status = "1";
      userRequest.addApply(item).then((res)=>{
        if(res.data.code == 200){
            this.$message.success("审核通过！")
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    // 审核不通过
    noPass(item) {
      item.status = "2"; // 默认状态2
      userRequest.addApply(item).then((res)=>{
        if(res.data.code == 200){
            this.$message.success("审核不通过！")
        }else{
          this.$message.error(res.data.message)
        }
      })
    },

    // 删除考勤
    deleteCheckwork(item) {
      // 删除提示
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 调用后台皆苦 获取列表中的id删除
          userRequest.deletecheckwork(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getcheckworkList();  // 删除后刷新列表
            }
          });
        })
        .catch(() => {});
    },

    // 删除申请
    deleteApply(item) {
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          userRequest.deleteApply(item.id).then((res) => {
            if (res.data.code == 200) {
              this.$message.success("删除成功");
              this.getApplyList2();
            }
          });
        })
        .catch(() => {});
    },

    // 考勤列表
    getcheckworkList(page = 1) {
      this.pageNo = page; //默认展示第一页
      userRequest
        .getcheckworkList({ // 调用后台分页接口 传递分页参数
          pageNo: this.pageNo_checkWork,
          pageSize: this.pageSize_checkWork,
          searchTxt: this.searchTxt1,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result; //后台返回的数据 把它用result装起来
            this.total_checkWork = result.total; // 总数
            this.checkWorkList = result.result; // 接受列表数据
            console.log(this.checkWorkList);
            setTimeout(() => {
              this.loading = false; // 加载列表后 关闭刷新
            }, 500);
          }
        });
    },

    // 申请列表
    getApplyList2(page = 1) {
      this.pageNo = page; //默认展示第一页
      userRequest
        .getApplyList2({
          pageNo: this.pageNo_message,
          pageSize: this.pageSize_message,
          searchTxt: this.searchTxt2,
        })
        .then((res) => {
          if (res.data.code === 200) {
            const result = res.data.result; //后台返回的数据 把它用result装起来
            this.total_apply = result.total; // 总数
            this.applyList = result.result; // 接受列表数据
            setTimeout(() => {
              this.loading = false; // 加载列表后 关闭刷新
            }, 500);
          }
        });
    },
  },

  created() {
    // 获取本地用户信息
    this.userinfo = JSON.parse(window.localStorage.getItem("userinfo"));

    if (this.userinfo == null || this.userinfo == "") {
      // 如果没有用户信息就进不来此页面
      window.localStorage.removeItem("userinfo");
      cookie.remove("satoken");
      this.$router.push({ path: "/" });
      this.$notify({
        title: "需要登录才能访问哦",
        type: "warning",
      });
    } else {
      //如果有用户信息 就取出用户名 放在页面头部展示
      this.username = this.userinfo.userName;
      this.type = this.userinfo.type;
    }
    // 页面加载时请求数据
    this.getcheckworkList();
    this.getApplyList2();
  },
};
</script>

<style lang="scss" scoped> // 页面样式
@import "../css/Home.scss";
.item {
  margin: 25px 100px 0 0;
}
</style>
